<template>
  <div>
    <h1>App</h1>
    <Nav />
    <div>
      <button @click="Comp = 'News'">新闻</button>
      <button @click="Comp = 'Music'">音乐</button>
      <button @click="Comp = 'Play'">游戏</button>
    </div>
    <keep-alive>
      <component :is="Comp"></component>
    </keep-alive>
  </div>
</template>

<script>
/* 
  webpack打包的时候,观察Music是直接引入当前组件的,所以会立马把这种写法的引入组件,一并打包
*/
// import Music from "@/components/Music";
/* 
  只有某个组件是动态组件的时候,才把他写作异步组件!!!
  webpack打包的时候,观察Music函数内部动态引入了某个组件,只有Music函数调用的时候才会引入这个组件,所以webpack就会把内部引入的组件单独打包
  函数写法的组件一定要把import的返回值return出来,方便使用组件的时候判断引入状态,并拿到引入的组件渲染
*/
const Music = () => {
  return import("@/components/Music");
};

const Play = () => import("@/components/Play");
const News = () => import("@/components/News");

export default {
  name: "App",
  components: {
    Play,
    News,
    Music,
  },
  data() {
    return {
      Comp: "Play",
    };
  },
};
</script>

<style></style>
